<template>
    <div id="newDom">
        <video
            id="videoPlayer"
            ref="videoPlayer"
            class="video-js vjs-big-play-centered"
            width="100%"
            height="100%"
            oncontextmenu="return false;"
            disablePictureInPicture
            controlslist="nodownload">
        </video>
    </div>
</template>

<script >
    import 'videojs-flash';
    import './../../assets/zh-CN';
    
	export default {
		props:['playParam'],
	    data() {
		    return {
                player: null, // 播放器
                videoOptions: {
                    loop: false, // true -- 视频一结束就重新开始
                    controls: false,
                    fluid: false, // 并且删除 video 结构的类 vjs-fluid  防止视频不同大小自适应，造成撑开父级元素
                    autoplay: false, // true--浏览器准备好时开始回放
                    height: '360',
                    poster: "", // 封面地址
                    language: 'zh-CN',
                    techOrder: ['flash'],
                    sources: [{
                        type: "rtmp/mp4", // 类型
                        src: this.playParam.play_url // 视频播放路径
                    }],
                },
                controlBar: null,
                progressTime: 0,
			}
		},
		mounted(){
            this.initPlay();
        },
        beforeDestroy() {
            this.player && this.player.dispose();
        },
		methods:{
            formatTooltip(val) {
                return val / 100;
            },
            /**
             * 播放器初始化
             */
			initPlay(){
                let self = this;
                let videoPlayer = document.querySelector('#newDom');
                videoPlayer.innerHTML = `
                    <video id="videoPlayer" class="video-js vjs-big-play-centered vjs-fluid" width="100%" height="100%" oncontextmenu="return false;" disablePictureInPicture controlslist="nodownload"></video>
                    <div class="customize-control-bar">
                        <div class="customize-fullscreen"></div>
                        <div class="customize-fullscreen"></div>
                        <div class="customize-fullscreen"></div>
                        <div class="customize-fullscreen"></div>
                        <div class="customize-fullscreen">
                            <span></span>
                        </div>
                    </div>
                `
                this.player = this.$videojs('videoPlayer', this.videoOptions, function onPlayerReady() {})

                this.player.on('play', function() {
                    self.onPlayerPlay();
                })
                this.player.on('timeupdate', function() {
                    self.onPlayerTimeupdate();
                })
			},
			onPlayerPlay(){
                this.debounce(() => {
                    var normal_currentTime = this.player.currentTime();
                    var unnormal_currentTime = this.player.currentTime();
                    if (normal_currentTime.toString() == unnormal_currentTime.toString()) {
                        this.player.pause();
                        this.player.play();
                    }
                }, 100);
            },
            /**
             * 延迟处理
             */
            debounce(func, wait, immediate) {
                let timeout, args, context, timestamp, result;
                const later = function() {
                    // 据上一次触发时间间隔
                    const last = +new Date() - timestamp;

                    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
                    if (last < wait && last > 0) {
                        timeout = setTimeout(later, wait - last);
                    } else {
                        timeout = null;
                        // 如果设定为immediate===true，因为开始已经调用过了此处无需调用
                        if (!immediate) {
                            result = func.apply(context, args);
                            if (!timeout) context = args = null;
                        }
                    }
                };
                return function(...args) {
                    context = this;
                    timestamp = +new Date();
                    const callNow = immediate && !timeout;
                    // 如果延时不存在，重新设定延时
                    if (!timeout) timeout = setTimeout(later, wait);
                    if (callNow) {
                        result = func.apply(context, args);
                        context = args = null;
                    }

                    return result;
                };
            },
			onPlayerTimeupdate(){       
				if( !is_empty( this.playParam.end_time ) && !is_empty( this.playParam.end_time ) ){
					//小于开始时间，从开始时间播放
					if( this.player.currentTime() < this.playParam.start_time  ){
						setTimeout( () => {
							this.player.currentTime( this.playParam.start_time ) ;
						},100)
					} else if( this.player.currentTime() > this.playParam.end_time ){ //大于结束时间，播放停止
						setTimeout( () => {
							this.player.currentTime( this.playParam.start_time ) ;
							this.player.pause();
						},100)
                    }
				}
			},
		}
	}
</script>

<style lang="scss">
    #newDom {
        position: relative;

        .customize-control-bar {
            position: absolute;
            bottom: 0;
            z-index: 1;
            color: #fff;
            width: 100%;
            background-color: rgba(43,51,63,.7);
            height: 3em;
            align-items: center;
            justify-content: flex-start;

            .customize-fullscreen {
                cursor: pointer;
                width: 4em;
                height: 100%;
                display: inline-block;
                vertical-align: text-top;
                line-height: 3em;
                text-align: center;

                span {
                    font-family: VideoJS;
                    font-weight: 400;
                    font-style: normal;
                }

                span:before {
                    content: "\F108";
                    font-size: 1.8em;
                }
            }
        }
    }
</style>